<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>通过form表单提交</h1>
    <form id="myform" name="myform" method="post" enctype="multipart/form-data" action="http://localhost:5193/File/Upload/FormImg">
        <input type="file" name="files" id="files" value="选择需要上传的文件" multiple />
        <input type="button" id="submitbtn" value="提交" onclick="uplpadfile()">
        <input type="button" value="下载文件" onclick="downloadfile()">
    </form>


    <!-- 存放并展示后端返回的图片 -->
    <img src="" alt="" id="img">





    <script src="./jquery-3.6.0.min.js"></script>
    <script src="./jquery.form.min.js"></script>

    <!-- axios包 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>



    <script>
        //给后端发送文件
        function uplpadfile() {
            //获取表单的数据        
            var formdata = new FormData(document.getElementById("myform"));
            console.log(formdata);
            console.log(formdata.get("files"));

            $.ajax({
                type: 'Post',
                data: formdata,
                contentType: false,
                processData: false,
                url: "http://localhost:5193/File/Upload/FormImg",

                success: function(result) {
                    console.log(result);
                    if (result.code == "1000") {
                        var imglist = result.saveFilePath;
                        document.getElementById("imglist").innerText = imglist;
                    } else {
                        alert('提交失败,重新尝试提交');
                    }
                }
            })
        };



        //如果后端直接传来字节流用这个方法
        //接收后端传过来的文件字符串流，并下载
        function downloadfile() {
            //法一：使用axios
            axios.request({
                url: "http://localhost:5193/File/dolowdfile?Id=88864074-FF07-42DD-9BF1-08DA5E53CC56", //这里是你的请求url
                responseType: 'blob', //这里最重要,不要去掉
                method: 'get' //请求方式,看后台的需求,可能是get,post等方式
            }).then(res => {
                console.log(res);
                console.log(22);
                let blob = new Blob([res.data], {
                    type: "image/jpg"
                });

                let url = window.URL.createObjectURL(blob);
                var img = document.getElementById("img");
                img.src = url;
            })

            //法二、使用ajax，但不成功,因为返回的data不是正确的
            /* $.ajax({
                type: 'get',
                 contentType: false,
                 processData: false,
                responseType: 'blob',
                url: "http://localhost:5193/File/dolowdfile?Id=88864074-FF07-42DD-9BF1-08DA5E53CC56",

                success: function(content) {
                     content.data.bufferstr.blob().then((blob) => {
                         const blobUrl = window.URL.createObjectURL(blob);
                         // 这里的文件名根据实际情况从响应头或者url里获取
                         const filename = 'user.jpg';
                         const a = document.createElement('a');
                         a.href = blobUrl;
                         a.download = filename;;
                         a.click();
                         window.URL.revokeObjectURL(blobUrl);
                     });
            */
        }
    </script>
</body>

</html>